<template>
	<div id="app">
		<transition :name="t_name" :mode="t_mode">
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		</transition>
		<loading></loading>
		<toast></toast>
		<alert></alert>
		<qrcode></qrcode>
	</div>
</template>

<script>
import FastClick from 'fastclick'
import './assets/style.css'
FastClick.attach(document.body);
import Loading from './ui/loading/loading.vue';
import Toast from './ui/toast/toast.vue';
import Alert from './ui/alert/alert.vue';
import Qrcode from './ui/qrcode/qrcode.vue';
export default {
	name: 'app',
	components: {
		Loading,
		Toast,
		Alert,
		Qrcode
	},
	data(){
		return {
			timer: null,
			t_name: '',
			t_mode: ''
		}
	},
	watch:{
		//用于监听路由变化,设置相应过渡效果名称和模式
		$route(to,from){
			// if(to.name=='detail' && from.name=='index'){
			// 	this.t_name='enter-fade';
			// 	this.t_mode='';
			// } else if(to.name=='index' && from.name=='detail'){
			// 	this.t_name='';
			// 	this.t_mode='';
			// } else if(to.name=='score1' && from.name=='detail'){
			// 	this.t_name='enter-fade';
			// 	this.t_mode='';
			// } else if(to.name=='score2' && from.name=='score1'){
			// 	this.t_name='';
			// 	this.t_mode='';
			// } else {
			// 	this.t_name='';
			// 	this.t_mode='';
			// }
		}
	},
	methods:{
		resizeWindow: function(){
			window.clearTimeout(this.timer);
			let scale = 1 / window.devicePixelRatio;
			let meta=document.getElementsByTagName('meta')[0];
			meta["content"] = 'width=device-width,initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+',user-scalable=no';
			let html = document.getElementsByTagName('html')[0];
			let pageHeight = Math.max(html.getBoundingClientRect().height, window.innerHeight);
			let pageWidth = Math.max(html.getBoundingClientRect().width, window.innerWidth);
			window.pageHeight=pageHeight;
			window.pageWidth=pageWidth;
			var UA=window.navigator.userAgent;
			var isPC=false;
			if(UA.indexOf('Mobile')>-1 || UA.indexOf('Android')>-1 || UA.indexOf('UCWEB')>-1 || pageWidth/pageHeight<0.66){
				isPC=false;
				html.style.fontSize = pageWidth/7.5 + 'px'
			} else {
				isPC=true;
				html.style.fontSize = pageHeight*9/16/7.5+'px';
			}
			var webapp=document.getElementById('webapp_container');
			if(isPC){
				webapp.className="pc";
				var width=pageHeight*9/16+'px';
				webapp.style.width=width;
			} else {
				webapp.removeAttribute('class');
				webapp.removeAttribute('style');
			}
		},
		// 防止微信浏览器窗口被上下拖动,,,无效
		stopWeixinScroll: function(){
			var overscroll = function(el) {
				el.addEventListener('touchstart', function() {
					var top = el.scrollTop
						, totalScroll = el.scrollHeight
						, currentScroll = top + el.offsetHeight;
					//If we're at the top or the bottom of the containers
					//scroll, push up or down one pixel.
					//
					//this prevents the scroll from "passing through" to
					//the body.
					if(top === 0) {
						el.scrollTop = 1;
					} else if(currentScroll === totalScroll) {
						el.scrollTop = top - 1;
					}
				});
				el.addEventListener('touchmove', function(evt) {
					//if the content is actually scrollable, i.e. the content is long enough
					//that scrolling can occur
					if(el.offsetHeight < el.scrollHeight)
						evt._isScroller = true;
				});
			}
			overscroll(document.getElementById('webapp_container'));
			document.body.addEventListener('touchmove', function(evt) {
				//In this case, the default behavior is scrolling the body, which
				//would result in an overflow.	Since we don't want that, we preventDefault.
				if(!evt._isScroller) {
					evt.preventDefault();
				}
			});
		}
	},
	mounted(){
		let that=this;
		window.onresize=function(){
			that.timer = window.setTimeout(that.resizeWindow, 100);
		}
		// document.getElementById('webapp_container').addEventListener('touchmove',function(e){
		// 	e.stopPropagation();
		// 	e.preventDefault();
		// },false);
		// this.stopWeixinScroll();
	}
}
</script>

<style>
#app {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
	background: url(./pages/search/image/night-sky.jpg);
	background-size: 100% 100%;
	overflow: hidden;
}
router-view {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
